---
name: useControllableValue
route: /useControllableValue
menu: 'State'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3CodeTsx from '!raw-loader!./demo/demo3.tsx';
import Demo3CodeJsx from '!raw-loader!./demo/demo3.jsx';

# useControllableValue

In some components, we need the state to be managed by itself or controlled by it's parent. `useControllableValue` is a Hook that helps you manage this kind of state.

## Examples

### Uncontrolled component

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Uncontrolled component' description='If there is no value in props, the component use self-contained state'>
  <Demo1 />
</JackBox>

### Controlled component

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Controlled component' description="If props has a value field, then the state is controlled by it's parent">
  <Demo2 />
</JackBox>

### No value, have onChange component

<JackBox jsCode={Demo3CodeJsx} tsCode={Demo3CodeTsx} demoName='No value, have onChange component' description='As long as there is an onChange field in props, the onChange function will be fired when state changes'>
  <Demo3 />
</JackBox>

## API

```javascript
const [state, setState] = useControllableValue(props: object, options?: Options)
```

### Result

| Property | Description                  | Type                 |
|----------|------------------------------|----------------------|
| state    | your state                   | -                    |
| setState | Modify the function of state | (value: any) => void |

### Params

| Property | Description                              | Type   | Default |
|----------|------------------------------------------|--------|---------|
| props    | component props                          | object | -       |
| options  | Optional configuration item, see Options | -      | -       |


### Options

| Property             | Description                                                                 | Type   | Default        |
|----------------------|-----------------------------------------------------------------------------|--------|----------------|
| defaultValue         | The default value, will be overridden by props.defaultValue and props.value | -      | -              |
| defaultValuePropName | Custom defaultVlue attribute name                                           | string | 'defaultValue' |
| valuePropName        | Custom value attribute name                                                 | string | 'value'        |
| trigger              | Custom trigger attribute name                                               | string | 'onChange'     |